<template>
  <div class="home">

    <div class="operate_box">
      <div class="item_box">
      </div>
    </div>
    <div>
      <div
        id="lineChart"
        style="width: 100%;max-height: 300px;min-height:300px;"
        v-loading="loading"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import {getOrderData} from "@/api/data/statistics";
import commons from "@/utils/common";

export default {
    props:['timeType','proDate','isUpdate'],
    data() {
      return {
        loading: false,
      };
    },
    mounted() {
      this.getTableInfo();
    },
    methods: {
      getTableInfo() {
        let that = this;
        that.loading = true;

        let queryParams = {
          type:0,
          startTime: that.proDate ? that.proDate[0] : '',
          endTime: that.proDate ? that.proDate[1] : '',
        };
        getOrderData(queryParams).then(res => {
          that.initChart(res);
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      },

      // 折线图
      initChart(info) {
        let that = this;
        //如果数据只有条，构造一条起始数据
        if(info.length === 1) {
          info.unshift(info[0])
        }
        let option = {
          color: ["rgb(106,246,200)","rgb(97,113,173)",'rgb(19,33,102)'],
          animation: true, //图表初始化动画是否展示
          tooltip: {
            //鼠标悬浮交互时的信息提示
            trigger: "axis", //触发类型
            padding: 10, //提示padding
          },
          title: {
            text: '订单数据统计'
          },
          grid: {
            //直角坐标系内绘图网格
            left: "7%",
            right: "8%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: info.map((res) => {
                return that.formatTime(res.date)
              }),
              axisLabel: {
                textStyle: {
                  //文字样式
                  color: "#999",
                  fontSize: 11,
                  fontFamily:"Microsoft YaHei",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [

            {
              name: "成功订单数",
              type: "line",
              smooth: true, //折线是否平滑
              symbolSize: 1,
              data: info.map((res) => {
                return res.successNum;
              }) || [],
              tooltip: {
                //提示框样式
                show: true,
              },
              lineStyle: {
                color: "#797FA1", //折线颜色
                width: 1,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(114,236,223)'
                  }, {
                    offset: 1,
                    color: 'rgb(24,244,164)'
                  }])
                }
              },
            },
            {
              name: "失败订单数",
              type: "line",
              smooth: true, //折线是否平滑
              symbolSize: 1,
              data: info.map((res) => {
                return res.errorNum;
              }) || [],
              tooltip: {
                //提示框样式
                show: true,
              },
              lineStyle: {
                color: "#A1D0FC", //折线颜色
                width: 1,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(19,33,102)'
                  }, {
                    offset: 1,
                    color: 'rgb(13,24,80)'
                  }])
                }
              },
            },
            {
              name: "待支付订单数",
              type: "line",
              smooth: true, //折线是否平滑
              symbolSize: 1,
              data: info.map((res) => {
                return res.noPayNum;
              }) || [],
              tooltip: {
                //提示框样式
                show: true,
              },
              lineStyle: {
                color: "rgb(65,35,119)", //折线颜色
                width: 1,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(22,39,108)'
                  }, {
                    offset: 1,
                    color: 'rgb(47,84,209)'
                  }])
                }
              },
            },
          ],
        };
        // 基于准备好的dom，初始化echarts实例
        var lineChart = echarts.init(document.getElementById("lineChart"));
        window.addEventListener("resize", function () {
          lineChart.resize();
        });
        // 使用刚指定的配置项和数据显示图表。
        option&&lineChart.setOption(option);
      },


      formatTime(time){
        return commons.formatTime(time)
      },
    },
    watch:{
      //查询的事件监听
      isUpdate(newU,oldU) {
        this.getTableInfo();
      },
    }

  };
</script>

<style scoped>


  .operate_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .location {
    display: flex;
    justify-content: space-between;
  }

  .first_menu {
    cursor: pointer;
  }
</style>
